<template>
  <div class="all">
    <!-- 按钮栏组件（添加、删除） -->
    <!-- {{sysCompanyCodeRoles}} -->
    <!-- {{getFindByTypeData}} -->
    <el-button type="primary" plain @click="createdAdd" size="mini" icon="el-icon-plus">新建</el-button>
    <!-- <el-button
      class="allDelete"
      type="danger"
      plain
      @click="toDelete"
      size="mini"
      icon="el-icon-delete"
    >批量删除</el-button> -->
    <!-- <div>{{addData.diaDataAdd[1]}}</div>
    <div>{{addData.diaDataAdd[index]}}</div> -->
    <!-- 弹窗 -->
    <!-- {{addData}} -->
    <el-dialog title="新增" :visible.sync="addData.dialogVisibleAdd" width="760px" :before-close="handleClose">
      <template v-for="(item, index) in addData.diaDataAdd">
        <div class="list" :key="index" v-if="item.addSign">
          <!-- {{addData.diaDataAdd}} -->
          <template v-if="item.addSign">
            <!-- input框 -->
            <div v-if="item.type === 'input' && item.addSign" class="lister">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color: red">*</span>
                <span v-else style="color: white">*</span>
                {{ item.CN }}:
              </span>
              <span class="inb">
                <!-- 标记：{{[item.attr]}} -->
                <!-- {{item}} -->
                <!-- <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
                v-if="item.EN==='notes'"
              > -->
                <el-input v-if="
                                        item.EN === 'notes' ||
                                        item.EN === 'memo'
                                    " width="210px" type="textarea" v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" clearable @blur="BurExp($event, item, index)" size="mini"></el-input>
                <el-input v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" clearable @blur="BurExp($event, item, index)" size="mini" v-else></el-input>
              </span>
              <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
                <el-button icon="el-icon-warning" circle></el-button>
              </el-tooltip>
              <!-- <span v-if="!item.result" class="font_color"></span> -->
            </div>
            <!-- 计数器 -->
            <div class="lister" :key="index" v-else-if="item.type === 'number' && item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color: red">*</span>
                {{ item.CN }}:
              </span>
              <span class="inb">
                <!-- 标记：{{[item.attr]}} -->
                <el-input-number v-model="addData.diaDataAdd[index].value" :min="0" label="描述文字" size="mini"></el-input-number>
              </span>
              <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
                <el-button icon="el-icon-warning" circle></el-button>
              </el-tooltip>
            </div>
            <!-- 时间选择 -->
            <div class="lister" :key="index" v-else-if="item.type == 'date' && item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color: red">*</span>
                {{ item.CN }}:
              </span>
              <span class="inb" v-if="item.type == 'date' && item.addSign">
                <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime"></el-date-picker>
              </span>
            </div>
            <!-- 下拉框 -->
            <div class="lister" :key="index" v-else-if="item.type == 'select' && item.addSign">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color: red">*</span>
                {{ item.CN }}:
              </span>
              <span v-if="item.EN === 'superior'" class="inb">
                <el-cascader v-model="superiorData" :options="selectOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </span>
              <span v-else class="inb">
                <el-select v-if="
                                        item.typeGroupCode &&
                                        item.EN == 'userType'
                                    " v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable multiple collapse-tags>
                  <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                  <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
                </el-select>
                <!-- 字典项 typeGroupCode-->
                <el-select v-else-if="
                                        item.typeGroupCode &&
                                        item.EN != 'userType'
                                    " v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                  <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                  <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
                </el-select>
                <!-- 租户管理员页面  --租户框 -->

                <el-select v-else-if="item.EN == 'sysCompanyCode'" v-model="addData.diaDataAdd[index].value" placeholder="请选择-1" size="mini" clearable>
                  <!-- @change="sysCompanyCodeChange(addData.diaDataAdd[index].value)" -->
                  <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
                </el-select>
                <!-- 租户管理员页面  --角色框 -->
                <el-select v-else-if="item.EN == 'groupId'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysRoleChange" clearable>
                  <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
                <!-- 字典项 dictTable-->
                <el-select v-else-if="item.dictTable && item.EN != 'groupId'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                  <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                </el-select>
              </span>
            </div>
            <!-- 多选框 -->
            <div class="Checkbox" :key="index" v-else-if="item.type == 'Checkbox' && item.addSign">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color: red">*</span>
                {{ item.CN }}
              </span>
              <span class="inb" v-if="item.type == 'Checkbox' && item.addSign">
                <el-checkbox v-model="checked"></el-checkbox>
              </span>
            </div>
          </template>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSelectByCodeAndType1,
  // selectAllByType1Add,
  getSelectByCodeAndType, //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from '@/api/TenantAdministratorManagement'
import { selectAllByType1Add } from '@/api/admin/user/index'

// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data() {
    return {
      // 租户管理员  租户-角色数据
      sysCompanyCodeRolesData: this.$parent.sysCompanyCodeRoles,
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined,
      },
      // selectData:[]
      selectOptions: [
        {
          value: 1,
          label: '微山自来水',
          children: [
            {
              value: 2,
              label: '幸福苑小区',
              children: [{ value: 3, label: '1号楼' }],
            },
          ],
        },
        {
          value: 4,
          label: '泗水县',
          children: [
            {
              value: 5,
              label: '花园小区',
              children: [
                { value: 6, label: '1号楼' },
                { value: 7, label: '2号咯' },
                { value: 8, label: '2号咯' },
                { value: 9, label: '2号咯' },
              ],
            },
            {
              value: 10,
              label: '荣盛小区',
            },
          ],
        },
      ],
      superiorData: '',
      // 组件类型
      modelType: 'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      checked: false,
      // 备注  文本域
      textarea: '',
      // 返回的角色对象
      roleArr: [],
    }
  },
  computed: {
    //解决v-for v-if在同一标签警告问题
    // TableDataModel() {
    //   let new_DataModel = JSON.parse(JSON.stringify(this.addData.diaDataAdd));
    //   for (let i = 0; i < new_DataModel.length; i++) {
    //     if (!new_DataModel[i].addSign) {
    //       console.log("-------------计算属性-----------");
    //       new_DataModel.splice(i, 1);
    //     }
    //   }
    //   console.log(new_DataModel)
    //   return new_DataModel;
    // }
  },
  props: [
    //添加传过来的值
    'diaDataAdd',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'sysCompanyCodeRoles',
  ],
  mounted() {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd))
  },
  methods: {
    // 角色
    sysRoleChange(newvalue) {
      console.log(8888888888888)

      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr
      console.log(999999999999)

      var id = ''
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index]
        id = roleArrs[index].id
      }
      this.$emit('sysRoleId', id)
      console.log(id)
    },
    // getFindByTypeData(){
    //   this.getFindByType()
    // },
    //
    // 租户管理员页面  如果改变触发
    async sysCompanyCodeChange() {
      const { data = [] } = await selectAllByType1Add()
      //   console.log(res, "角色请求的结果");
      if (data) {
        console.log('租户success', data)
        this.roleArr = data
      } else {
        console.log('该租户没有对应的角色')
      }
    },
    //   获取父级select的数据
    // getSelectData(){
    //     console.log(this.$parent,'ceshikk');

    // },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
      this.addData.dialogVisibleAdd = false
    },
    //搜索框内容传递给父元素
    createdAdd() {
      this.addData.dialogVisibleAdd = true
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = ''
        this.addData.diaDataAdd[i].result = true
      }
      // let zuhuId = this.
      this.sysCompanyCodeChange()
    },
    //添加-传给父组件，ajax
    toAdd() {
      let bur = true

      let attrArr = []
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        //console.log(this.addData.diaDataAdd[i].EN);    || at.value == ""
        let at = this.addData.diaDataAdd[i]
        //at.result === false || at.value == ""
        //sign
        if (at.addSign) {
          if (at.result === false || at.value === '') {
            // 判断红色星号    是否必须为空
            if (at['skipSign']) {
              bur = true
            } else {
              bur = false
              break
            }
          }
        } else {
        }
      }
      if (this.superiorData.length != 0) {
        bur = true
      }
      console.log(bur)

      if (bur === true) {
        console.log(this.addData.diaDataAdd, 966)
        //debugger;
        this.$emit('toAdd', this.addData.diaDataAdd)
        // console.log(this.addData.diaDataAdd,'这是什么');
        // console.log(")))))))))))))))))))))))");
        this.addData.dialogVisibleAdd = false
      } else {
        // console.log(this.superiorData.length !=0,'ceshi');
        this.$message({
          message: '请添加全部参数，并符合标准！',
          type: 'warning',
        })
        // alert("请添加全部参数，并符合标准！");
      }
    },

    //删除-传给父组件，ajax
    toDelete() {
      this.$emit('toDelete', '点击了删除')
    },

    getSTime(val) {
      this.addData.diaDataAdd.createTime = val
      // console.log(val)
    },
    //正则表达式
    BurExp(e, item, index) {
      // console.log(item, index);
      // console.log( this.addData.diaDataAdd,this.TableDataModel)
      let boolean = new RegExp(item.Exp).test(e.target.value)
      this.addData.diaDataAdd[index].result = boolean
      // this.TableDataModel[index].result= boolean;
      // let newAobj=this.TableDataModel[index]
      // console.log(boolean);
      // console.log(this.TableDataModel[index]);
    },
    // 新增   租户特殊请求
    getSelectByCodeAndTypeDatas() {
      console.log(this.$parent.getSelectByCodeAndTypeData, 'zhegeshishsi')
    },
  },
  created() {
    // this.getSelectData()
    this.getSelectByCodeAndTypeDatas()
  },
  watch: {
    optionsZi(newVal) {
      this.searchOption = newVal
    },
    searchOptionTable(newVal) {
      this.searchOptions = newVal
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.all {
  .is-plain {
    // width: 84px;
    // height: 34px;
    // /deep/.el-icon-plus{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  .allDelete {
    // width: 110px;
    // /deep/.el-icon-delete{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  display: inline-block;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    .lister {
      height: 44px;
      width: 370px;
      .fon {
        text-align: right;
        margin-right: 14px;
        width: 99px;
      }
      .inb {
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
    .font_color {
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
}
</style>
